<template>
	<view class="container">
		<cu-custom :bgColor="theme.themeClass" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">添加地址</block>
		</cu-custom>
		<form>
			<view class="cu-form-group margin-top">
				<view class="title">收货人</view>
				<input placeholder="请输入收货人姓名" name="input" type="text" maxlength="6" :value="form.name"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">联系电话</view>
				<input placeholder="请输入联系电话" name="input" type="number" maxlength="11" :value="form.mobile"></input>
				<view class="cu-capsule radius">
					<view class='cu-tag bg-blue '>
						+86
					</view>
					<view class="cu-tag line-blue">
						中国大陆
					</view>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="title">选择地址</view>
				<view v-if="form.city" class="input address-box" @tap="chooseCity">{{ form.province }}-{{ form.city }}-{{ form.county }}</view>
				<view v-else class="input" @tap="chooseCity">请点击选择地址</view>
				<text class='cuIcon-locationfill text-orange'></text>
			</view>
			<view class="cu-form-group">
				<view class="title">所在地区</view>
				<input placeholder="请填写所在地区" name="input" type="text" maxlength="25" :value="form.address"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">邮政编码</view>
				<input placeholder="请输入邮政编码" name="input" type="number" maxlength="6" :value="form.cityCode"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">是否默认</view>
				<switch @change="onChangeDefault" :class="form.is_default?'checked':''" class="brown" :checked="form.is_default?true:false"></switch>
			</view>
		</form>
		<view class="fixed-btn">
			<view class="padding flex flex-direction">
				<button @tap="save" :class="['cu-btn','lg',theme.themeClass]">立即保存</button>
			</view>
		</view>
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValue" @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
	</view>
</template>

<script>
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
	export default {
		components: {
			mpvueCityPicker
		},
		data() {
			return {
				theme: this.theme,
				form:{
					name:'',
					mobile:'',
					province:'',
					city:'',
					county:'',
					address:'',
					cityCode:'',
					is_default:false,
				},
				cityPickerValue: [0, 0, 0],
				themeColor: '#007AFF',
			};
		},
		methods:{
			toAddress(){
				uni.navigateTo({
					url:"/pages/user/address"
				})
			},
			textareaBInput(e) {
				this.textareaBValue = e.detail.value
			},
			onCancel(e) {
				
			},
			chooseCity() {
				this.$refs.mpvueCityPicker.show();
			},
			onConfirm(e) {
				let arr = e.label.split('-');
				this.form.province = arr[0];
				this.form.city = arr[1];
				this.form.county = arr[2];
				this.form.cityCode=e.cityCode;
			},
			onChangeDefault(e) {
				this.form.is_default = e.detail.value
			},
			save(){
				
			}
		}
	}
</script>

<style lang="scss">
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
	.input{
		color: #666666;
		text-align: left;
		flex: 1;
	}
	.address-box{
		color: #000000;
		text-align: left;
		flex: 1;
	}
	.fixed-btn{
		position: fixed;
		bottom: 0upx;
		left: 0upx;
		width: 100%;
		height: 120upx;
		background-color: #FFFFFF;
	}
</style>
